Conversation with Gemini

<div class="card-content">
    <h3>Full Stack Web Development</h3>
    <p>Master front-end & back-end skills, build real-world projects, and boost your career.</p>
    <div class="card-buttons">
        ...
    </div>
</div>

<div class="card-content">
    <h3>Full Stack Web Development</h3>
    <div class="desc-box">
        <p>Master front-end & back-end skills, build real-world projects, and boost your career.</p>
    </div>
    <div class="card-buttons">
        ...
    </div>
</div>

/* Description sathi navin "Square Box" */
.desc-box {
    background: #f8f9fa; /* Halka Grey Color */
    border-radius: 12px; /* Gol kone */
    padding: 15px;
    margin-bottom: 25px;
    flex-grow: 1; /* Hach button la khalcha bajula thevel */
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-card-final p {
    margin-bottom: 0; /* Paragraph cha extra margin kadhun taka */
}

<section class="animated-hero-banner">
    <div class="banner-content">
        <h1>Internships</h1>
        <p>Your Gateway to a Successful Tech Career</p>
    </div>
    <div class="waves-container">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7)" />
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
                <use xlink:href="#gentle-wave" x="48" y="7" fill="#f8f9fa" />
            </g>
        </svg>
    </div>
</section>

/* --- New Animated Hero Banner --- */
.animated-hero-banner {
    position: relative;
    background: linear-gradient(135deg, #D432CE, #FA0516);
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh; /* Tumhi height kami-jast karu shakta */
    min-height: 350px;
}

.banner-content {
    position: relative;
    z-index: 2;
}

.banner-content h1 {
    font-size: 4rem;
    font-weight: 700;
    text-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.banner-content p {
    font-size: 1.2rem;
    opacity: 0.9;
}

.waves-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15vh;
    min-height: 100px;
    max-height: 150px;
}

.waves {
    position: relative;
    width: 100%;
    height: 100%;
}

.parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px,0,0);
    }
    100% { 
        transform: translate3d(85px,0,0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .banner-content h1 {
        font-size: 2.5rem;
    }
    .waves-container {
        height: 10vh;
        min-height: 60px;
    }
}

<section class="hero-banner-blobs">
    <div class="blob-container">
        <div class="blob"></div>
        <div class="blob"></div>
        <div class="blob"></div>
    </div>
    <div class="banner-content">
        <h1>Internships</h1>
        <p>Your Gateway to a Successful Tech Career</p>
    </div>
</section>

/* --- New Animated Blobs Banner --- */
.hero-banner-blobs {
    position: relative;
    height: 50vh; /* Tumhi height adjust karu shakta */
    min-height: 400px;
    background-color: #1a1a2e; /* Dark background to make blobs pop */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden; /* Very important */
}

.banner-content {
    position: relative;
    z-index: 2;
}

.banner-content h1 {
    font-size: 4.5rem;
    font-weight: 700;
}

.banner-content p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* --- The Blobs --- */
.blob-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.blob {
    position: absolute;
    border-radius: 50%;
    background: var(--primary-gradient, linear-gradient(135deg, #D432CE, #FA0516));
    opacity: 0.4;
    filter: blur(50px); /* This creates the soft look */
    animation: move-blob 20s infinite alternate;
}

/* Creating 3 different blobs with different sizes and positions */
.blob:nth-child(1) {
    width: 300px;
    height: 300px;
    top: -50px;
    left: -100px;
    animation-duration: 25s; /* Different speed */
}

.blob:nth-child(2) {
    width: 400px;
    height: 400px;
    bottom: -150px;
    right: -150px;
    animation-duration: 30s; /* Different speed */
    animation-direction: alternate-reverse;
}

.blob:nth-child(3) {
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 20s;
}

/* The Animation */
@keyframes move-blob {
    0% {
        transform: scale(1) translate(0, 0);
    }
    100% {
        transform: scale(1.5) translate(100px, -50px);
    }
}

<section class="hero-banner-particles">
    <canvas id="particle-canvas"></canvas>
    
    <div class="banner-content">
        <h1>Available Batches</h1>
        <p>Join the next generation of tech leaders.</p>
    </div>
</section>

/* --- New Interactive Particle Banner --- */
.hero-banner-particles {
    position: relative;
    height: 60vh; /* Tumhi height adjust karu shakta */
    min-height: 400px;
    background-color: #0d0221; /* Dark Blue/Purple Background */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.banner-content {
    position: relative;
    z-index: 2;
}

.banner-content h1 {
    font-size: 4.5rem;
    font-weight: 700;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.banner-content p {
    font-size: 1.3rem;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .banner-content h1 {
        font-size: 3rem;
    }
    .banner-content p {
        font-size: 1rem;
    }
}

document.addEventListener('DOMContentLoaded', function() {

    const canvas = document.getElementById('particle-canvas');
    if (canvas) {
        const ctx = canvas.getContext('2d');
        let particlesArray;

        // Set canvas size
        canvas.width = canvas.parentElement.offsetWidth;
        canvas.height = canvas.parentElement.offsetHeight;

        // Mouse object
        const mouse = {
            x: null,
            y: null,
            radius: (canvas.height / 120) * (canvas.width / 120)
        };

        window.addEventListener('mousemove', function(event) {
            mouse.x = event.x - canvas.getBoundingClientRect().left;
            mouse.y = event.y - canvas.getBoundingClientRect().top;
        });
        
        window.addEventListener('mouseout', function(){
            mouse.x = undefined;
            mouse.y = undefined;
        });

        // Particle class
        class Particle {
            constructor(x, y, directionX, directionY, size, color) {
                this.x = x;
                this.y = y;
                this.directionX = directionX;
                this.directionY = directionY;
                this.size = size;
                this.color = color;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
                ctx.fillStyle = '#ffffff';
                ctx.fill();
            }
            update() {
                if (this.x > canvas.width || this.x < 0) {
                    this.directionX = -this.directionX;
                }
                if (this.y > canvas.height || this.y < 0) {
                    this.directionY = -this.directionY;
                }
                this.x += this.directionX;
                this.y += this.directionY;
                this.draw();
            }
        }

        // Create particle array
        function init() {
            particlesArray = [];
            let numberOfParticles = (canvas.height * canvas.width) / 9000;
            for (let i = 0; i < numberOfParticles; i++) {
                let size = (Math.random() * 2) + 1;
                let x = (Math.random() * ((canvas.width - size * 2) - (size * 2)) + size * 2);
                let y = (Math.random() * ((canvas.height - size * 2) - (size * 2)) + size * 2);
                let directionX = (Math.random() * 0.4) - 0.2;
                let directionY = (Math.random() * 0.4) - 0.2;
                let color = '#fff';
                particlesArray.push(new Particle(x, y, directionX, directionY, size, color));
            }
        }

        // Connect particles
        function connect() {
            let opacityValue = 1;
            for (let a = 0; a < particlesArray.length; a++) {
                for (let b = a; b < particlesArray.length; b++) {
                    let distance = ((particlesArray[a].x - particlesArray[b].x) * (particlesArray[a].x - particlesArray[b].x)) +
                        ((particlesArray[a].y - particlesArray[b].y) * (particlesArray[a].y - particlesArray[b].y));
                    if (distance < (canvas.width / 7) * (canvas.height / 7)) {
                        opacityValue = 1 - (distance / 20000);
                        ctx.strokeStyle = 'rgba(212, 50, 206,' + opacityValue + ')'; // Line color
                        ctx.lineWidth = 1;
                        ctx.beginPath();
                        ctx.moveTo(particlesArray[a].x, particlesArray[a].y);
                        ctx.lineTo(particlesArray[b].x, particlesArray[b].y);
                        ctx.stroke();
                    }
                }
            }
        }

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let i = 0; i < particlesArray.length; i++) {
                particlesArray[i].update();
            }
            connect();
        }

        // Resize event
        window.addEventListener('resize', function() {
            canvas.width = canvas.parentElement.offsetWidth;
            canvas.height = canvas.parentElement.offsetHeight;
            mouse.radius = (canvas.height / 120) * (canvas.width / 120);
            init();
        });

        init();
        animate();
    }
});

/* --- Light Theme Variables --- */
:root {
    --primary-gradient: linear-gradient(135deg, #D432CE, #FA0516);
    --primary-pink: #D432CE;
    --accent-blue: #3B82F6;
    --bg-light: #F8F9FA;
    --card-bg: #FFFFFF;
    --text-dark: #212529;
    --text-light: #6c757d;
    --border-color: #dee2e6;
    --poppins-font: 'Poppins', sans-serif;
}

body {
    font-family: var(--poppins-font);
    background-color: var(--bg-light);
    color: var(--text-dark);
}

/* --- Hero Section & Navbar (Light Theme) --- */
.hero-section {
    background: var(--card-bg);
    padding-bottom: 60px;
    /* Adding a subtle curve at the bottom */
    position: relative;
    overflow: hidden;
}
.hero-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -5%;
    width: 110%;
    height: 100px;
    background: var(--bg-light);
    border-radius: 50%;
}

.navbar {
    background-color: transparent !important;
}

.navbar-brand img {
    height: 40px;
}

.navbar .nav-link {
    color: var(--text-dark) !important;
    font-weight: 500;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.navbar .nav-link:hover, .navbar .nav-link.active {
    color: var(--primary-pink) !important;
}

.btn-free-demo {
    background: var(--primary-gradient);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 50, 206, 0.3);
}

.btn-free-demo:hover {
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(212, 50, 206, 0.4);
}

.hero-content {
    padding-top: 60px;
    position: relative;
    z-index: 2;
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
}

.hero-text h1 span {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-text .tags {
    margin: 25px 0;
}

.hero-text .tags span {
    display: inline-block;
    color: var(--text-light);
    font-weight: 500;
    padding-right: 15px;
    position: relative;
    margin-right: 15px;
}

.hero-text .tags span:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: 0;
    color: #ddd;
}

.action-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.action-buttons .btn {
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.action-buttons .btn-whatsapp {
    background-color: #25D366;
    color: white;
}
.action-buttons .btn-phone {
    background-color: var(--accent-blue);
    color: white;
}
.action-buttons .btn-demo {
    background-color: var(--primary-pink);
    color: white;
}
.action-buttons .btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.ratings {
    display: flex;
    gap: 30px;
    align-items: center;
}
.rating-item {
    color: var(--text-light);
    font-weight: 500;
}
.rating-item img {
    height: 20px;
    margin-right: 8px;
}

/* --- Light Form Design --- */
.contact-form-glass {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.contact-form-glass h3 {
    color: var(--text-dark);
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}
.form-control, .form-select {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 12px;
}
.form-control::placeholder {
    color: #aaa;
}
.form-control:focus, .form-select:focus {
    background-color: white;
    border-color: var(--primary-pink);
    box-shadow: 0 0 0 3px rgba(212, 50, 206, 0.15);
}
.btn-submit-form {
    background: var(--primary-gradient);
    color: white;
    width: 100%;
    padding: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    transition: all 0.3s ease;
}
.btn-submit-form:hover {
    filter: brightness(1.1);
}

<nav class="navbar navbar-expand-lg navbar-dark">

<nav class="navbar navbar-expand-lg navbar-light">

/* --- NEW UNIQUE LIGHT THEME --- */
:root {
    --bg-light: #FDF8F5; /* Soft Beige background */
    --card-bg: #FFFFFF;
    --text-dark: #3D405B; /* Dark Slate Grey for text */
    --accent-terracotta: #E07A5F; /* Main accent color */
    --accent-sage: #81B29A; /* Secondary accent for tags/icons */
    --border-color: #f2e9e4;
    --poppins-font: 'Poppins', sans-serif;
}

body {
    font-family: var(--poppins-font);
    background-color: var(--bg-light);
    color: var(--text-dark);
}

/* --- Hero Section & Navbar (New Theme) --- */
.hero-section {
    background-color: var(--card-bg);
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}
.hero-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -5%;
    width: 110%;
    height: 100px;
    background: var(--bg-light);
    border-radius: 50%;
}

.navbar {
    background-color: transparent !important;
}

.navbar-brand img {
    height: 40px;
}

.navbar .nav-link {
    color: var(--text-dark) !important;
    font-weight: 500;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.navbar .nav-link:hover, .navbar .nav-link.active {
    color: var(--accent-terracotta) !important;
}

.btn-free-demo {
    background-color: var(--accent-terracotta);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-free-demo:hover {
    color: white;
    filter: brightness(1.1);
    box-shadow: 0 5px 15px rgba(224, 122, 95, 0.3);
}

.hero-content {
    padding-top: 60px;
    position: relative;
    z-index: 2;
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
}

.hero-text h1 span {
    color: var(--accent-terracotta);
}

.hero-text .tags {
    margin: 25px 0;
}

.hero-text .tags span {
    display: inline-block;
    color: var(--text-light);
    font-weight: 500;
    padding-right: 15px;
    position: relative;
    margin-right: 15px;
}

.hero-text .tags span:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: 0;
    color: var(--border-color);
}

.action-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.action-buttons .btn {
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.action-buttons .btn-whatsapp {
    background-color: #25D366;
    color: white;
}
.action-buttons .btn-phone {
    background-color: var(--accent-sage);
    color: white;
}
.action-buttons .btn-demo {
    background-color: var(--accent-terracotta);
    color: white;
}
.action-buttons .btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.ratings {
    display: flex;
    gap: 30px;
    align-items: center;
}
.rating-item {
    color: var(--text-light);
    font-weight: 500;
}
.rating-item img {
    height: 20px;
    margin-right: 8px;
}

/* --- Form Design (New Theme) --- */
.contact-form-glass {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
.contact-form-glass h3 {
    color: var(--text-dark);
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}
.form-control, .form-select {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 12px;
}
.form-control::placeholder {
    color: #aaa;
}
.form-select {
    color: var(--text-dark);
}
.form-control:focus, .form-select:focus {
    background-color: white;
    border-color: var(--accent-terracotta);
    box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.15);
}
.btn-submit-form {
    background-color: var(--accent-terracotta);
    color: white;
    width: 100%;
    padding: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    transition: all 0.3s ease;
}
.btn-submit-form:hover {
    filter: brightness(1.1);
}

<nav class="navbar navbar-expand-lg navbar-dark">

<nav class="navbar navbar-expand-lg navbar-light">

/* --- NEW: Animated Geometric Background --- */
.hero-section {
    position: relative; /* This is important for positioning the shapes */
    overflow: hidden;   /* This hides parts of shapes that go outside */
    background-color: var(--card-bg, #FFFFFF); /* Fallback background */
}

/* Container for the animated shapes */
.background-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Puts it behind the content */
}

/* Creating the shapes */
.background-shapes div {
    position: absolute;
    border-radius: 50%; /* Makes the shapes circular */
    opacity: 0.5;
}

/* Shape 1 */
.shape1 {
    width: 200px;
    height: 200px;
    background: #F4A261; /* Terracotta Light */
    top: 10%;
    left: 15%;
    animation: move-shape 15s infinite alternate;
}

/* Shape 2 */
.shape2 {
    width: 300px;
    height: 300px;
    background: #E9C46A; /* Muted Gold */
    bottom: -50px;
    right: 10%;
    animation: move-shape 20s infinite alternate-reverse;
}

/* Shape 3 */
.shape3 {
    width: 150px;
    height: 150px;
    background: #81B29A; /* Sage Green */
    bottom: 20%;
    left: 5%;
    animation: move-shape 18s infinite alternate;
}

/* The animation that moves the shapes */
@keyframes move-shape {
    from {
        transform: translate(0, 0) rotate(0deg);
    }
    to {
        transform: translate(50px, 30px) rotate(45deg);
    }
}

<header class="hero-section">
    <div class="background-shapes">
        <div class="shape1"></div>
        <div class="shape2"></div>
        <div class="shape3"></div>
    </div>
    
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
            </nav>

        <div class="row align-items-center hero-content">
            </div>
    </div>
</header>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A2Z IT HUB - The Launchpad For Tomorrow's Tech Experts</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* --- Light Theme Variables --- */
        :root {
            --primary-gradient: linear-gradient(135deg, #E07A5F, #3D405B); /* Terracotta to Slate */
            --primary-accent: #E07A5F; /* Terracotta */
            --secondary-accent: #81B29A; /* Sage Green */
            --bg-light: #FDF8F5; /* Soft Beige */
            --card-bg: #FFFFFF;
            --text-dark: #3D405B; /* Dark Slate Grey */
            --text-light: #6c757d;
            --border-color: #f2e9e4;
            --poppins-font: 'Poppins', sans-serif;
        }

        body {
            font-family: var(--poppins-font);
            background-color: var(--bg-light);
            color: var(--text-dark);
        }

        /* --- Hero Section & Navbar (Light Theme) --- */
        .hero-section {
            background: var(--card-bg);
            padding-bottom: 60px;
            position: relative;
            overflow: hidden; /* Important for the shapes */
        }
        
        .navbar {
            background-color: transparent !important;
            position: relative;
            z-index: 3; /* Navbar should be on top */
        }

        .navbar-brand img {
            height: 40px;
        }

        .navbar .nav-link {
            color: var(--text-dark) !important;
            font-weight: 500;
            margin: 0 10px;
            transition: color 0.3s ease;
        }

        .navbar .nav-link:hover, .navbar .nav-link.active {
            color: var(--primary-accent) !important;
        }

        .btn-free-demo {
            background: var(--primary-accent);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 25px;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .btn-free-demo:hover {
            color: white;
            filter: brightness(1.1);
            box-shadow: 0 5px 15px rgba(224, 122, 95, 0.3);
        }

        .hero-content {
            padding-top: 60px;
            position: relative;
            z-index: 2; /* Content should be above background shapes */
        }

        .hero-text h1 {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--text-dark);
            line-height: 1.2;
        }

        .hero-text h1 span {
            color: var(--primary-accent);
        }

        /* (Other styles for tags, buttons, form remain the same) */
        
        .hero-text .tags { margin: 25px 0; }
        .hero-text .tags span { display: inline-block; color: var(--text-light); font-weight: 500; padding-right: 15px; position: relative; margin-right: 15px; }
        .hero-text .tags span:not(:last-child)::after { content: '|'; position: absolute; right: 0; color: var(--border-color); }
        .action-buttons { display: flex; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; }
        .action-buttons .btn { padding: 12px 25px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; }
        .action-buttons .btn-whatsapp { background-color: #25D366; color: white; }
        .action-buttons .btn-phone { background-color: var(--secondary-accent); color: white; }
        .action-buttons .btn-demo { background-color: var(--primary-accent); color: white; }
        .action-buttons .btn:hover { transform: translateY(-3px); filter: brightness(1.1); }
        .ratings { display: flex; gap: 30px; align-items: center; }
        .rating-item { color: var(--text-light); font-weight: 500; }
        .rating-item img { height: 20px; margin-right: 8px; }
        .contact-form-glass { background: var(--card-bg); padding: 30px; border-radius: 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.08); }
        .contact-form-glass h3 { color: var(--text-dark); font-weight: 600; margin-bottom: 20px; text-align: center; }
        .form-control, .form-select { background-color: var(--bg-light); border: 1px solid var(--border-color); color: var(--text-dark); padding: 12px; }
        .form-control::placeholder { color: #aaa; }
        .form-control:focus, .form-select:focus { background-color: white; border-color: var(--primary-accent); box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.15); }
        .btn-submit-form { background: var(--primary-accent); color: white; width: 100%; padding: 12px; font-weight: 700; font-size: 1.1rem; border: none; transition: all 0.3s ease; }
        .btn-submit-form:hover { filter: brightness(1.1); }

        /* --- NEW: Animated Geometric Background --- */
        .background-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            overflow: hidden;
        }
        .background-shapes div {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
        }
        .shape1 {
            width: 200px;
            height: 200px;
            background: var(--accent-terracotta);
            top: 10%;
            left: 5%;
            animation: move-shape 15s infinite alternate;
        }
        .shape2 {
            width: 300px;
            height: 300px;
            background: var(--accent-sage);
            bottom: -50px;
            right: 5%;
            animation: move-shape 20s infinite alternate-reverse;
        }
        .shape3 {
            width: 150px;
            height: 150px;
            background: #E9C46A; /* Muted Gold */
            top: 20%;
            right: 20%;
            animation: move-shape 18s infinite alternate;
        }
        @keyframes move-shape {
            from { transform: translate(0, 0) scale(1) rotate(0deg); }
            to { transform: translate(50px, -30px) scale(1.2) rotate(60deg); }
        }

    </style>
</head>
<body>

    <header class="hero-section">
        
        <div class="background-shapes">
            <div class="shape1"></div>
            <div class="shape2"></div>
            <div class="shape3"></div>
        </div>

        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#">
                    <img src="images/logo.png" alt="A2Z IT HUB Logo">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="mainNav">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Courses</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Placements</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
                    </ul>
                    <a href="#" class="btn btn-free-demo">Free Demo</a>
                </div>
            </nav>

            <div class="row align-items-center hero-content">
                <div class="col-lg-7">
                    <div class="hero-text">
                        <h1>The Launchpad For Tomorrow's<br><span>Tech Experts</span></h1>
                        <div class="tags">
                            <span>IT</span>
                            <span>Non-IT</span>
                            <span>Corporate</span>
                            <span>Online & Classroom Training</span>
                        </div>
                        <div class="action-buttons">
                            <a href="#" class="btn btn-whatsapp"><i class="fab fa-whatsapp"></i> WhatsApp</a>
                            <a href="#" class="btn btn-phone"><i class="fas fa-phone-alt"></i> 020 48553951</a>
                            <a href="#" class="btn btn-demo">Free Demo</a>
                        </div>
                        <div class="ratings">
                            <div class="rating-item">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" alt="Google">
                                <span>4.9</span> ★★★★★
                            </div>
                             <div class="rating-item">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Justdial_Logo.svg/2560px-Justdial_Logo.svg.png" alt="Justdial">
                                <span>4.9</span> ★★★★★
                            </div>
                            <div class="rating-item">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Sulekha_logo_new.png" alt="Sulekha">
                                <span>4.9</span> ★★★★★
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <form class="contact-form-glass">
                        <h3>Contact Us</h3>
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="Enter Your Name">
                        </div>
                        <div class="mb-3">
                            <input type="email" class="form-control" placeholder="Enter Your E-mail...">
                        </div>
                         <div class="mb-3">
                            <input type="tel" class="form-control" placeholder="Enter Your Phone...">
                        </div>
                        <div class="mb-3">
                            <select class="form-select">
                                <option selected>Select your country</option>
                                <option value="1">India</option>
                            </select>
                        </div>
                         <div class="mb-3">
                            <select class="form-select">
                                <option selected>Choose Branch</option>
                                <option value="1">Nashik</option>
                                <option value="2">Ahmednagar</option>
                            </select>
                        </div>
                        <div class="mb-3">
                             <input type="text" class="form-control" placeholder="Enter Your Course Name">
                        </div>
                        <button type="submit" class="btn btn-submit-form">Submit</button>
                    </form>
                </div>
            </div>
        </div>
        
    </header>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // No JavaScript needed for this animation
    </script>
</body>
</html>